<template>
    <view>
        <!-- subpackage/pages/settings/settings.wxml -->
        <view class="settings-container">
            

            <!-- 基础设置 -->
            <view class="section">
                <view class="section-title">基础设置</view>
                <up-cell-group>
                    <up-cell title="消息通知">
                        <up-switch slot="right-icon" :checked="settings.notification" @change="onNotificationChange" />
                    </up-cell>

                    <up-cell title="深色模式">
                        <up-switch slot="right-icon" :checked="settings.darkMode" @change="onDarkModeChange" />
                    </up-cell>

                    <up-cell title="自动更新">
                        <up-switch slot="right-icon" :checked="settings.autoUpdate" @change="onAutoUpdateChange" />
                    </up-cell>

                    <up-cell title="语言设置" :value="settings.language === 'zh-CN' ? '简体中文' : 'English'" is-link @click="showLanguagePickerFun" />
                </up-cell-group>
            </view>

            <!-- 存储管理 -->
            <view class="section">
                <view class="section-title">存储管理</view>
                <up-cell-group>
                    <up-cell title="清除缓存" value="释放存储空间" is-link @click="clearCache" />
                </up-cell-group>
            </view>

            <!-- 其他 -->
            <view class="section">
                <view class="section-title">其他</view>
                <up-cell-group>
                    <up-cell title="关于我们" value="查看版本信息" is-link @click="aboutUs" />
                </up-cell-group>
            </view>

            <!-- 语言选择器 -->
            <up-popup :show="showLanguagePicker" position="bottom" @close="onCloseLanguagePicker">
                <up-picker :columns="languageOptions" @confirm="onLanguageConfirm" @cancel="onCloseLanguagePicker" />
            </up-popup>
        </view>

        <up-toast id="up-toast" />
    </view>
</template>

<script setup lang="ts">
// subpackage/pages/settings/settings.ts
import { ref, onMounted } from 'vue'

// 类型定义
interface Settings {
  notification: boolean
  darkMode: boolean
  autoUpdate: boolean
  language: string
}

interface LanguageOption {
  text: string
  value: string
}

interface LoadOptions {
  [key: string]: any
}

interface SwitchEvent {
  detail: boolean
}

interface PickerEvent {
  detail: {
    value: string
  }
}

interface ModalResult {
  confirm: boolean
}

// 响应式数据
const settings = ref<Settings>({
  notification: true,
  darkMode: false,
  autoUpdate: true,
  language: 'zh-CN'
})

const languageOptions = ref<LanguageOption[]>([
  {
    text: '简体中文',
    value: 'zh-CN'
  },
  {
    text: 'English',
    value: 'en-US'
  }
])

const showLanguagePicker = ref<boolean>(false)

// 页面加载数据
const loadPageData = (options: LoadOptions): void => {
  loadSettings()
}
// 加载设置
const loadSettings = (): void => {
  const savedSettings = uni.getStorageSync('settings') || settings.value
  settings.value = savedSettings
}

// 保存设置
const saveSettings = (): void => {
  uni.setStorageSync('settings', settings.value)
  uni.showToast({
    title: '设置已保存',
    icon: 'success'
  })
}

// 切换通知设置
const onNotificationChange = (event: SwitchEvent): void => {
  settings.value.notification = event.detail
  saveSettings()
}

// 切换深色模式
const onDarkModeChange = (event: SwitchEvent): void => {
  settings.value.darkMode = event.detail
  saveSettings()
}

// 切换自动更新
const onAutoUpdateChange = (event: SwitchEvent): void => {
  settings.value.autoUpdate = event.detail
  saveSettings()
}

// 显示语言选择器
const showLanguagePickerFun = (): void => {
  showLanguagePicker.value = true
}

// 关闭语言选择器
const onCloseLanguagePicker = (): void => {
  showLanguagePicker.value = false
}

// 选择语言
const onLanguageConfirm = (event: PickerEvent): void => {
  const { value } = event.detail
  settings.value.language = value
  showLanguagePicker.value = false
  saveSettings()
}

// 清除缓存
const clearCache = (): void => {
  uni.showModal({
    title: '确认清除',
    content: '确定要清除所有缓存数据吗？',
    success: (res: ModalResult) => {
      if (res.confirm) {
        uni.clearStorageSync()
        uni.showToast({
          title: '缓存已清除',
          icon: 'success'
        })
      }
    }
  })
}

// 关于我们
const aboutUs = (): void => {
  uni.showModal({
    title: '关于我们',
    content: '微信小程序 v1.0.0\n\n感谢您的使用！',
    showCancel: false
  })
}

// 返回上一页
const goBack = (): void => {
  uni.navigateBack()
}

// 页面挂载时执行
onMounted(() => {
  loadPageData({})
})

// 暴露变量和方法
defineExpose({
  settings,
  languageOptions,
  showLanguagePicker,
  loadPageData,
  loadSettings,
  saveSettings,
  onNotificationChange,
  onDarkModeChange,
  onAutoUpdateChange,
  showLanguagePickerFun,
  onCloseLanguagePicker,
  onLanguageConfirm,
  clearCache,
  aboutUs,
  goBack
})
</script>
<style>
/* subpackage/pages/settings/settings.wxss */
.settings-container {
    background-color: #f7f8fa;
    min-height: 100vh;
}

.section {
    margin-bottom: 24rpx;
}

.section-title {
    padding: 32rpx 32rpx 16rpx;
    font-size: 28rpx;
    color: #969799;
    font-weight: 500;
}

/* 自定义Vant组件样式 */
.up-cell__title {
    font-weight: 500;
    color: #323233;
}

.up-cell__value {
    color: #646566;
    font-size: 28rpx;
}

.up-switch {
    transform: scale(0.8);
}

.up-nav-bar {
    background-color: #fff;
    border-bottom: 1px solid #ebedf0;
}

.up-picker {
    background-color: #fff;
}
</style>
